// 定时器
<template>
  <div class="t_drawer_body">
    <t_tab_container notHasTabs>
      <div class="tab_content">
        <fieldLabel>标题设置</fieldLabel>
        <Input v-model="data.title" />
        <fieldLabel class="hint"
          >添加定时器后，审批节点将根据设置的时间流转</fieldLabel
        >
        <fieldLabel>时间设置</fieldLabel>
        <div class="cut_input_group">
          <InputNumber
            v-model="data.day"
            type="number"
            :min="0"
            class="cut_input"
          /><span class="unit">天</span>
          <InputNumber
            v-model="data.hour"
            type="number"
            :min="0"
            :max="23"
            class="cut_input"
          /><span class="unit">时</span>
          <InputNumber
            type="number"
            v-model="data.minute"
            :min="0"
            :max="59"
            class="cut_input"
          /><span class="unit">分</span>
          <InputNumber
            v-model="data.second"
            type="number"
            :min="0"
            :max="59"
            class="cut_input"
          /><span class="unit">秒</span>
        </div>
      </div>
    </t_tab_container>
    <div class="t_buttom_group">
      <Button style="margin-right: 10px" @click="() => $emit('close')"
        >取消</Button
      >
      <Button type="primary" @click="confirm">确定</Button>
    </div>
  </div>
</template>

<script>
import t_tab_container from "./components/t_tab_container.vue";
import fieldLabel from "./components/fieldLabel.vue";
import EventBus from "../eventBus";

import Button from "ant-design-vue/lib/button/button";
import Input from "ant-design-vue/lib/input";
import InputNumber from "ant-design-vue/lib/input-number";

export default {
  components: {
    t_tab_container,
    fieldLabel,
    Button,
    Input,
    InputNumber,
  },
  props: {
    nodeData: Object,
  },
  computed: {},
  data() {
    return {
      data: JSON.parse(JSON.stringify(this.nodeData.dataProps)),
    };
  },

  methods: {
    confirm() {
      EventBus.$emit("UPDATE_NODE", {
        nodeId: this.nodeData.nodeId,
        path: this.nodeData.path,
        dataProps: this.data,
      });
      this.$emit("close");
    },
  },
};
</script>

<style scoped>
.t_drawer_body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
}

.t_buttom_group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
.tab_content {
  padding: 0 24px;
}

.hint {
  font-size: 14px;
  color: #a5a5a5;
}

.cut_input_group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cut_input {
  flex: 1;
  /* margin-right: 10px; */
}

.unit {
  margin-left: 5px;
  margin-right: 15px;
}
</style>